<template>
  <div class="big">
    <!-- <div class="box">
      <header class="header">
        <van-search
          v-model="value"
          show-action
          label=""
          placeholder="请输入搜索名称"
          @search="onSearch"
        >
          <template #left>
            <img src="./assets//1_03.gif" alt="" />
          </template>
          <template #action>
            <van-icon size="30px" name="manager-o" />
          </template>
        </van-search>
      </header>
      <main class="main">

        <van-swipe
          style="width: 100%; height: 200px"
          :autoplay="3000"
          lazy-render
        >
          <van-swipe-item v-for="image in images" :key="image">
            <img style="width: 100%; height: 100%" :src="image" />
          </van-swipe-item>
        </van-swipe>
   
        <van-grid column-num="5">
          <van-grid-item
            icon="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"
            text="米金商城"
          />
          <van-grid-item
            icon="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"
            text="小米众筹"
          />
          <van-grid-item
            icon="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"
            text="小米众筹"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="以旧换新"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="小米上新"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="智能"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="笔记本热卖"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="电视热卖"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="洗衣机"
          />
          <van-grid-item
            icon="https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png"
            text="米粉卡"
          />
        </van-grid>
      </main>
    </div> -->
    <router-view></router-view>
    <!-- <footer class="footer">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">分类</van-tabbar-item>
        <van-tabbar-item icon="comment-o">米圈</van-tabbar-item>
        <van-tabbar-item icon="setting-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </footer> -->
    <router-view name="footer"></router-view>
  </div>
</template>

<script setup>
import { ref } from "vue"; 

const value = ref("");
//轮播图
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];


</script>

<style lang="scss" scoped>
html,
body,
#app,
.big {
  width: 100%;
  height: 100%;
}
.big {
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  overflow: flex;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
  }
  .main {
    margin-top: 80px;
  }
  .ul {
    column-count: 2;
    li {
      break-inside: avoid;
    }
  }
}
</style>